<template>
  <div class="user-dashboard-content">
    <el-row :gutter="20">
      <!-- 用户信息 -->
      <el-col :span="8">
        <el-card class="user-info">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
              <el-button type="primary" size="small" @click="editUserInfo">编辑</el-button>
            </div>
          </template>
          <div class="info-content">
            <div class="avatar">
              <el-avatar :size="100" :src="userInfo.avatar" />
            </div>
            <div class="info-details">
              <h3>{{ userInfo.name }}</h3>
              <p><el-icon><User /></el-icon> {{ userInfo.username }}</p>
              <p><el-icon><Phone /></el-icon> {{ userInfo.phone }}</p>
              <p><el-icon><Message /></el-icon> {{ userInfo.email }}</p>
            </div>
          </div>
        </el-card>

        <!-- 信用信息 -->
        <el-card class="credit-info">
          <template #header>
            <div class="card-header">
              <span>信用信息</span>
            </div>
          </template>
          <div class="credit-content">
            <div class="credit-score">
              <el-progress
                type="dashboard"
                :percentage="creditScore"
                :color="scoreColor"
              >
                <template #default="{ percentage }">
                  <div class="score-value">
                    <span class="number">{{ percentage }}</span>
                    <span class="label">分</span>
                  </div>
                </template>
              </el-progress>
            </div>
            <div class="credit-level">
              <el-tag :type="creditTagType" size="large">{{ creditLevel }}</el-tag>
              <p class="level-desc">{{ creditLevelDesc }}</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 我的服务 -->
      <el-col :span="16">
        <el-card class="my-services">
          <template #header>
            <div class="card-header">
              <span>我的服务</span>
            </div>
          </template>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="我的订单" name="orders">
              <el-table :data="orders" style="width: 100%">
                <el-table-column prop="id" label="订单号" width="180" />
                <el-table-column prop="type" label="类型" width="120" />
                <el-table-column prop="amount" label="金额" width="120" />
                <el-table-column prop="status" label="状态" width="120">
                  <template #default="{ row }">
                    <el-tag :type="getOrderStatusType(row.status)">
                      {{ row.status }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180" />
                <el-table-column label="操作">
                  <template #default="{ row }">
                    <el-button type="primary" size="small" @click="viewOrder(row)">
                      查看详情
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="我的活动" name="activities">
              <el-table :data="activities" style="width: 100%">
                <el-table-column prop="id" label="活动ID" width="180" />
                <el-table-column prop="title" label="活动名称" width="180" />
                <el-table-column prop="type" label="类型" width="120" />
                <el-table-column prop="status" label="状态" width="120">
                  <template #default="{ row }">
                    <el-tag :type="getActivityStatusType(row.status)">
                      {{ row.status }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="time" label="活动时间" width="180" />
                <el-table-column label="操作">
                  <template #default="{ row }">
                    <el-button type="primary" size="small" @click="viewActivity(row)">
                      查看详情
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="我的积分" name="points">
              <div class="points-info">
                <div class="points-total">
                  <h3>当前积分</h3>
                  <p class="number">{{ points }}</p>
                </div>
                <div class="points-history">
                  <h3>积分明细</h3>
                  <el-table :data="pointsHistory" style="width: 100%">
                    <el-table-column prop="time" label="时间" width="180" />
                    <el-table-column prop="type" label="类型" width="120" />
                    <el-table-column prop="points" label="积分" width="120">
                      <template #default="{ row }">
                        <span :class="{ 'points-plus': row.points > 0, 'points-minus': row.points < 0 }">
                          {{ row.points > 0 ? '+' : '' }}{{ row.points }}
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="desc" label="说明" />
                  </el-table>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑用户信息对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="编辑个人信息"
      width="500px"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="form.avatar" :src="form.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { User, Phone, Message, Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 用户信息
const userInfo = ref({
  name: '张三',
  username: 'zhangsan',
  phone: '13800138000',
  email: 'zhangsan@example.com',
  avatar: 'https://via.placeholder.com/100'
})

// 信用分数据
const creditScore = ref(720)

// 信用等级
const creditLevel = computed(() => {
  if (creditScore.value >= 700) return '优秀'
  if (creditScore.value >= 600) return '良好'
  if (creditScore.value >= 500) return '一般'
  return '较差'
})

// 信用等级描述
const creditLevelDesc = computed(() => {
  if (creditScore.value >= 700) return '享受最高等级信用特权'
  if (creditScore.value >= 600) return '享受基础信用特权'
  return '继续提升信用分，解锁更多特权'
})

// 信用分颜色
const scoreColor = computed(() => {
  if (creditScore.value >= 700) return '#67C23A'
  if (creditScore.value >= 600) return '#409EFF'
  if (creditScore.value >= 500) return '#E6A23C'
  return '#F56C6C'
})

// 信用等级标签类型
const creditTagType = computed(() => {
  if (creditScore.value >= 700) return 'success'
  if (creditScore.value >= 600) return 'warning'
  return 'danger'
})

// 标签页
const activeTab = ref('orders')

// 订单数据
const orders = [
  {
    id: '202403200001',
    type: '购物',
    amount: 299,
    status: '已完成',
    createTime: '2024-03-20 10:00:00'
  },
  {
    id: '202403200002',
    type: '租房',
    amount: 3500,
    status: '进行中',
    createTime: '2024-03-20 11:00:00'
  },
  {
    id: '202403200003',
    type: '酒店',
    amount: 688,
    status: '待支付',
    createTime: '2024-03-20 12:00:00'
  }
]

// 活动数据
const activities = [
  {
    id: 'A202403200001',
    title: '西湖水质监测',
    type: '护水行动',
    status: '已报名',
    time: '2024-03-25 09:00-11:00'
  },
  {
    id: 'A202403200002',
    title: '资源回收',
    type: '环保行动',
    status: '已完成',
    time: '2024-03-20 14:00-16:00'
  },
  {
    id: 'A202403200003',
    title: '关爱老人行动',
    type: '公益活动',
    status: '进行中',
    time: '2024-03-23 14:00-16:00'
  }
]

// 积分数据
const points = ref(1280)
const pointsHistory = [
  {
    time: '2024-03-20 10:00:00',
    type: '活动奖励',
    points: 50,
    desc: '参与西湖水质监测活动'
  },
  {
    time: '2024-03-19 15:00:00',
    type: '购物返现',
    points: 30,
    desc: '购物订单返现'
  },
  {
    time: '2024-03-18 09:00:00',
    type: '信用提升',
    points: 20,
    desc: '信用分提升奖励'
  }
]

// 编辑用户信息
const dialogVisible = ref(false)
const formRef = ref(null)
const form = ref({
  avatar: '',
  name: '',
  phone: '',
  email: ''
})

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
}

const editUserInfo = () => {
  form.value = { ...userInfo.value }
  dialogVisible.value = true
}

const handleAvatarSuccess = (res) => {
  form.value.avatar = res.url
}

const submitForm = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid) => {
    if (valid) {
      userInfo.value = { ...form.value }
      dialogVisible.value = false
      ElMessage.success('保存成功')
    }
  })
}

// 获取订单状态标签类型
const getOrderStatusType = (status) => {
  switch (status) {
    case '已完成':
      return 'success'
    case '进行中':
      return 'warning'
    case '待支付':
      return 'danger'
    default:
      return 'info'
  }
}

// 获取活动状态标签类型
const getActivityStatusType = (status) => {
  switch (status) {
    case '已完成':
      return 'success'
    case '进行中':
      return 'warning'
    case '已报名':
      return 'info'
    default:
      return 'info'
  }
}

// 查看订单详情
const viewOrder = (order) => {
  console.log('查看订单详情', order)
}

// 查看活动详情
const viewActivity = (activity) => {
  console.log('查看活动详情', activity)
}
</script>

<style scoped>
.user-dashboard-content {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  margin-bottom: 20px;
}

.info-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  margin-bottom: 20px;
}

.info-details {
  text-align: center;
}

.info-details h3 {
  margin: 0 0 15px;
  font-size: 18px;
  color: #303133;
}

.info-details p {
  margin: 10px 0;
  color: #606266;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.credit-info {
  margin-bottom: 20px;
}

.credit-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.credit-score {
  margin-bottom: 20px;
}

.credit-level {
  text-align: center;
}

.level-desc {
  margin-top: 10px;
  color: #909399;
}

.my-services {
  min-height: 500px;
}

.points-info {
  padding: 20px;
}

.points-total {
  text-align: center;
  margin-bottom: 30px;
}

.points-total h3 {
  margin: 0 0 10px;
  color: #303133;
}

.points-total .number {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
}

.points-history h3 {
  margin: 0 0 20px;
  color: #303133;
}

.points-plus {
  color: #67C23A;
}

.points-minus {
  color: #F56C6C;
}

.avatar-uploader {
  text-align: center;
}

.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.avatar-uploader .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
}
</style> 